<template>
	<div>
		<!-- xpert导航栏 -->
		<xpertNavBar :statusTab="statusTab" />
		<div style="height: 150px; width: 100%"></div>
		<div class="request m1280">Request community</div>
		<!-- 搜索 -->
		<div class="scheh m1280 f f-j-b f-a-c">
			<div class="left">
				<div class="inpBox f f-a-c">
					<input type="text" class="inp" placeholder="Digital marketing" v-model="inp" name="" id="" />
					<div @click="submit" class="btnSch hand f f-a-c f-j-c"><img src="/src/assets/sche.png" alt="" /></div>
				</div>
				<!-- topcs -->
				<div class="topcs f f-a-c">
					<div class="screeningItem">
						<el-dropdown max-height="200" trigger="click">
							<span class="el-dropdown-link hand">+ Topics：</span>
							<template #dropdown>
								<el-dropdown-menu>
									<el-dropdown-item v-for="(item, index) in topics" @click="qieLanguage(item)" :key="index">{{ item.name }}</el-dropdown-item>
								</el-dropdown-menu>
							</template>
						</el-dropdown>
					</div>
					<!-- <div class="topic hand">+Topics</div> -->
					<div class="neiItem" v-for="(item, index) in topList" :key="index">{{ item.name }}</div>
					<!-- <div class="neiItem">SEO</div>
					<div class="neiItem">Content marketing</div>
					<div class="neiItem">Consulting</div>
					<div class="neiItem">B2C marketing</div> -->
					<div v-if="topList.length > 0" @click="deltopics" class="imgDet hand f f-a-c f-j-c"><img src="/src/assets/det.png" alt="" /></div>
				</div>
			</div>
			<!-- <div class="rig f f-d-c f-a-c f-j-c">
				<div class="title">Let experts come to you</div>
				<div @click.stop="sendMy" class="titBtn hand">Send my requests</div>
			</div> -->
		</div>
		<!-- You might interested -->
		<div class="might m1280">
			<div class="interested">203 results</div>
			<div class="mightBox f f-a-c f-w-w">
				<div v-for="(item, index) in lists" @click="goDetail(item)" :key="index" class="hand mightItem">
					<div class="top f f-a-c f-j-b">
						<div class="topLeft f f-a-c">
							<img style="object-fit: cover" :src="item.buyerAvatar" alt="" />
							<span>{{ item.buyerFirstName }} {{ item.buyerLastName }}</span>
						</div>
						<div @click.stop="goApply" class="feiBtn hand f f-a-c f-j-c">
							<img src="/src/assets/user/feiji.png" alt="" />
							<span>Apply</span>
						</div>
					</div>
					<div class="count o-f-2">{{ item.descriptionTitle }}</div>
					<div class="cuntNei o-f-2">{{ item.descriptionDetail }}</div>
					<!-- <div class="more">Read more</div> -->
					<div class="tops f f-a-c">
						<div class="topics">Topics：</div>
						<div class="topicsBox hand" v-for="(ite, ind) in item.topicNames" :key="ind">{{ ite }}</div>
						<!-- <div class="topicsBox hand">Tech</div>
						<div class="topicsBox hand">Programming</div> -->
					</div>
					<div class="botBtn f f-a-c f-j-b">
						<div class="prais f f-a-c">
							<div @click.stop="goHasLike(item)" class="star m-r-10 f f-a-c">
								<img v-if="item.hasLike" src="/src/assets/user/star2.png" alt="" />
								<img v-else src="/src/assets/user/star.png" alt="" />
								<span style="margin-left: 2px">{{ item.likeNum }}</span>
							</div>
							<div class="imgBox">
								<img style="margin-left: -10px; object-fit: cover" v-for="(iteImg, indImg) in item.requestApplyRespVOS" :key="indImg" :src="iteImg.sellerAvatar" alt="" />
								<!-- <img style="margin-left: -10px" src="/src/assets/tou.png" alt="" /> -->
								<span>{{ item.requestApplyRespVOS?.length || 0 }} application</span>
							</div>
						</div>
						<div class="time f f-a-c">
							<img src="/src/assets/user/time.png" alt="" />
							<span>{{ getTimes(item.createTime) }}</span>
						</div>
						<div class="time f f-a-c">
							<img src="/src/assets/user/yaun.png" alt="" />
							<span>{{ item.viewNum }} views</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div style="margin-top: 60px; margin-bottom: 80px" class="hand">
			<div class="example-pagination-block f f -a-c f-j-c">
				<el-pagination @size-change="sizeChange" :default-page-size="6" @current-change="currentChange" layout="prev, pager, next" :total="total" />
			</div>
		</div>
		<xpertTabbar />
	</div>
</template>

<script setup>
	import { ref, onMounted } from "vue";
	import { TopicsList } from "@/api/commonality.js";
	import { MoerRequestCountList, ChangLive } from "@/api/xpert.js";
	import { getTimes } from "@/utils/setting.js";
	import { ElMessage } from "element-plus";
	import xpertTabbar from "@/components/tabBar/xpertTabbar.vue";
	import xpertNavBar from "@/components/navBar/xpertNavBar.vue";
	import router from "@/router/index.js";
	import ButtonDiffuse from "@/components/Button/ButtonDiffuse.vue";
	let statusTab = ref(1);
	let inp = ref("");
	let topList = ref([]);
	let pageNum = ref(1);
	let pageSize = ref(6);
	let total = ref(0);
	let lists = ref([]);
	let topics = ref([]);
	onMounted(async () => {
		window.addEventListener("scroll", handleScroll);
		await topicsList();
		await list();
	});
	// 列表
	const list = async () => {
		let li = topList.value.map(item => item.id);
		// console.log(li, "2222222222222222");
		// return;
		let n = await MoerRequestCountList({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			keyWord: inp.value,
			topicIds: li
		});
		total.value = n.data.total;
		lists.value = n.data.list;
	};
	// 点击搜索
	const submit = () => {
		pageNum.value = 1;
		list();
	};
	// 这个是添加喜欢
	const goHasLike = async item => {
		let n = await ChangLive({ id: item.id });
		if (n.code == 200) {
			ElMessage.success(n.msg);
			list();
		}
	};
	// 获取topics
	const topicsList = async () => {
		let n = await TopicsList();
		topics.value = n.data;
	};
	// 点击topicx
	const qieLanguage = item => {
		topList.value.push(item);
		list();
	};
	// 删除topics时
	const deltopics = () => {
		topList.value = [];
		list();
	};
	// 切换分页
	const sizeChange = e => {
		console.log(e, "1111111");
	};
	// 切换分页
	const currentChange = e => {
		pageNum.value = e;
		list();
		console.log(e, "1111111");
	};
	// 去Send
	const sendMy = e => {
		router.push({
			path: "/UseRequestCommunity/UseSendMyRequest"
		});
	};
	const goApply = () => {
		router.push({
			path: "/Request/RequestApply"
		});
	};
	// 去详情页
	const goDetail = e => {
		router.push({
			path: "/UseRequestCommunity/Detils",
			query: {
				id: e.id
			}
		});
	};
	// 这个是当头部导航栏滑倒下面时给tabr加个背景
	const handleScroll = () => {
		const scrollTop = document.documentElement.scrollTop;
		if (scrollTop > 0) {
			statusTab.value = 2;
		} else {
			statusTab.value = 1;
		}
	};
</script>
<style scoped>
	@import "./index.scss";
</style>
